<template>
  <div class="performance">
    <div class="comment-title">
      <img src="/src/assets/one-prepare/class-performance.png" alt />
      <span>课堂表现</span>
    </div>
    <div class="radio-container">
      <div class="radio-item">
        <div class="radio-label">出勤情况：</div>
        <el-radio-group v-model="formData.attendance">
          <el-radio :label="1">提前到</el-radio>
          <el-radio :label="2">准时</el-radio>
          <el-radio :label="3">迟到</el-radio>
          <el-radio :label="4">缺勤</el-radio>
        </el-radio-group>
      </div>
      <div class="radio-item">
        <div class="radio-label">听课状态：</div>
        <el-radio-group v-model="formData.listenState">
          <el-radio :label="1">优秀</el-radio>
          <el-radio :label="2">良好</el-radio>
          <el-radio :label="3">一般</el-radio>
        </el-radio-group>
      </div>
      <div class="radio-item">
        <div class="radio-label">上节课作业：</div>
        <el-radio-group v-model="formData.lastHomework">
          <el-radio :label="1">完成</el-radio>
          <el-radio :label="2">部分完成</el-radio>
          <el-radio :label="3">未完成</el-radio>
        </el-radio-group>
      </div>
      <div class="radio-item">
        <div class="radio-label">出门清：</div>
        <el-radio-group v-model="formData.outState">
          <el-radio :label="1">优秀</el-radio>
          <el-radio :label="2">良好</el-radio>
          <el-radio :label="3">一般</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="comment-title">
      <img src="/src/assets/one-prepare/teacher-comment.png" alt />
      <span>教师评语</span>
    </div>
    <div
      contenteditable="true"
      class="comment-area"
      @change="commentChanged"
      @blur="commentChanged"
      v-html="formData.comment"
      @input="filterWord"
    ></div>
    <div v-show="isShowComment" class="comment-normal-list" ref="commentList">
      <div
        v-for="(item, index) in regUsedSpeech"
        :key="index"
        v-html="item.text"
        @click="setComment(item.text)"
      ></div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, computed } from 'vue'
import axios from 'axios'
import store from './../../../store'
import $ from '$'
export default {
  props: {
    studentId: {
      type: String,
      default: '',
    },
    commentDetail: {
      type: Object,
      default: {},
    },
  },
  setup(props) {
    let prepareData = computed(() => store.state.prepareData)
    let formData = ref({
      attendance: '1',
      listenState: '1',
      lastHomework: '1',
      outState: '1',
      comment: '',
    })
    let isShowComment = ref(false)
    let commentList = ref()
    let usedSpeech = ref([
      '上课认真听讲，参与讨论态度认真，积极完成老师布置的各项任务，对于重难点也能及时做笔记，吸收得很快',
      '上课认真听讲，有参与讨论，偶尔走神，需要老师提问，还有容易被旁边的同学影响哦',
      '注意力不够集中，分神，需要老师提醒做笔记',
    ])
    let inputVal = ref('')
    let regUsedSpeech = ref([])
    for (let key in formData.value) {
      formData.value[key] = props.commentDetail[key]
    }
    const filterWord = (val) => {
      inputVal.value = val.data
      let win = window
      let doc: any = win.document
      let sel: any = doc.selection,
        range,
        rects,
        rect
      let x = 0,
        y = 0
      if (win.getSelection) {
        sel = win.getSelection()
        if (sel.rangeCount) {
          range = sel.getRangeAt(0).cloneRange()
          if (range.getClientRects) {
            range.collapse(true)
            rects = range.getClientRects()
            if (rects.length > 0) {
              rect = rects[0]
            }
            // 光标在行首时，rect为undefined
            if (rect) {
              x = rect.left
              y = rect.top
            }
          }
          // Fall back to inserting a temporary element
          if ((x == 0 && y == 0) || rect === undefined) {
            let span = doc.createElement('span')
            if (span.getClientRects) {
              // Ensure span has dimensions and position by
              // adding a zero-width space character
              span.appendChild(doc.createTextNode('\u200b'))
              range.insertNode(span)
              rect = span.getClientRects()[0]
              x = rect.left
              y = rect.top
              let spanParent = span.parentNode
              spanParent.removeChild(span)
              spanParent.normalize()
            }
          }
        }
      }
      commentList.value.style.position = 'absolute'
      commentList.value.style.left = `${x - 100}px`
      commentList.value.style.top = `${y - 100}px`
      if (val.data) {
        const a = $.debounce(() => getRecommend(val), 170)
        a()
      }
    }
    const setComment = (text) => {
      let reg = new RegExp(`(.*)${inputVal.value}`)
      formData.value.comment = formData.value.comment.replace(reg, `$1${text}`)
      isShowComment.value = false
    }
    const commentChanged = (evt) => {
      formData.value.comment = evt.target.innerHTML
    }
    const getRecommend = (val) => {
      isShowComment.value = false
      axios
        .post('/admin/speechcraft/queryPage', {
          text: val.data,
          size: 20,
        })
        .then((res: any) => {
          regUsedSpeech.value = res.json.records
          isShowComment.value = true
        })
    }
    const save = () => {
      return new Promise(((resolve, reject) => {
        axios.post('/admin/lessonSummary/saveOrUpdate', {
          lessonId: prepareData.value.id,
          studentName: props.commentDetail.studentName,
          studentId: props.studentId,
          status: 1,
          id: props.commentDetail.id,
          ...formData.value,
        }).then(res => {
          res.result && resolve(true)
        })
      }))
    }
    return {
      formData,
      filterWord,
      isShowComment,
      commentList,
      usedSpeech,
      setComment,
      commentChanged,
      regUsedSpeech,
      prepareData,
      getRecommend,
      save,
    }
  },
}
</script>

<style scoped lang="scss">
.performance {
  padding: 33px 50px;
  .comment-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    > img {
      width: 23px;
      height: 20px;
    }
    > span {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #faad14;
      margin-left: 8px;
    }
  }
  .radio-container {
    padding: 15px 20px;
    background: #f5f7fa;
    border-radius: 10px;
    margin-bottom: 24px;
    :nth-last-child(1) {
      margin-bottom: 0 !important;
    }
    .radio-item {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      .radio-label {
        width: 84px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }
  }
  .comment-area {
    // position: relative;
    width: 100%;
    height: 163px;
    padding: 10px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #dee4f1;
    user-modify: read-write-plaintext-only;
    -webkit-user-modify: read-write-plaintext-only;
  }
  .is_disabled {
    cursor: no-drop;
  }
  .comment-normal-list {
    position: absolute;
    background: #f5f7fa;
    padding: 1px;
    border-radius: 4px;
    display: grid;
    grid-template: auto / auto;
    grid-gap: 1px;
    height: 140px;
    overflow-y: auto;
    > div {
      padding: 5px 10px;
      background: #fff;
      cursor: pointer;
    }
  }
}
</style>
